Dev Theme Support
1. Result Summary
테마 지원은 ahawiki-theme localStorage key와 html.theme-* class를 중심으로 구현되어 있다.
현재 지원하는 테마는 다음 두 가지다.
- AhaWiki Light
- AhaWiki Dark
완료된 작업은 다음 범위다.
- 문서 head에서 테마 class를 조기 적용해 FOUC(Flash of Unstyled Content)를 줄임
- 내비게이션에 Light/Dark 를 오가는 테마 토글 버튼 추가 (처음엔 계정 메뉴의 선택 버튼 둘이었고, 2026-05-29 에 토글 하나로 바꿨다)
- 공통 UI 색상을 CSS custom properties로 정리
- 읽기 화면 공통 UI, 편집 화면, Kanban 상세 UI의 테마 대응
- JavaScript가 생성하는 UI와 table/structured data 주변 색상 정리
[[Themes]]매크로로 테마 토큰을 시각적으로 점검할 수 있게 함
남은 작업은 새 UI를 추가할 때의 검증과 유지보수다.
- 새 화면이나 컴포넌트는 AhaWiki Light와 AhaWiki Dark에서 모두 확인한다.
- 새 색상은 하드코딩하지 말고 가능한 한 CSS custom properties를 사용한다.
- 테마 토큰을 추가하거나 이름을 바꾸면
[[Themes]]매크로와 이 문서를 함께 갱신한다. - Account 화면은 2026-06-24 에 토큰으로 옮겼다. Admin(Mantine) 테마 대응과
system테마는 아직 후속 범위다.
2. Design
LocalStorage에 테마 문자열을 저장한다.
localStorage key: ahawiki-theme values: ahawiki-light ahawiki-dark
HTML에는 선택된 테마를 class로 부여한다.
<html class="theme-ahawiki-light"> <html class="theme-ahawiki-dark">
기본값은 theme-ahawiki-light다.
3. Theme Palette
테마 색상은 Less 변수가 아니라 CSS custom properties로 정의한다.
색상 팔레트는 --hue 하나로 만든다. 계정 메뉴의 슬라이더가 ahawiki-hue 로 localStorage 에 저장하고 <html> 의 --hue 에 넣는다. 없으면 사이트 기본값(contextSite.defaultHue, 그것도 없으면 220)이다.
4. Scope
이번 범위에서 제외하는 것:
- OS의
prefers-color-scheme자동 연동 system테마 추가- 관리자 화면의 Mantine color scheme 전환
- 사이트 테마 편집 UI의 구조 변경
- 문서 본문에서 사용자가 직접 지정한 색상까지 강제로 재해석하는 기능
5. See Also
5.2. Adjacent Pages
Control
≤ 32
all
1.0x
1.0x
80
-120
ON
Metrics
Nodes(visible/total)0/0
Links(visible/total)0/0
Avg degree0.00
Depth coverage0
Queue(fetch/graph)0 / 0
Zoom(scale)1.00x
Ctrl/⌘ + Scroll: Zoom
Root
1-hop
2-hop+